<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="phoneIndex1.css">
    <link rel="stylesheet" href="phoneIndex2.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('.p-immg').click(function () {
                $('.nav-1-1').show()
            })
            $('.p-immg img').dclick(function () {
                $('.nav-1-1').hide()
            })
            $('.log-img').click(function () {
                $('.nav-1-1').hide()
            })
            
        })
    </script>
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="head">
            <div class="head-nav">
                <div class="nav-logo">
                    <img src="../img/2.png" alt="" srcset="" class="log-img">
                </div>
                <div class="nav-nav">
                    <img class="p-immg" src="../img/tiaozhuan2.png" alt="">
                    <div class="nav-1-1">
                        <div class="title"><a href="./phoneIndex1.html">首页</a></div>
                        <div class="title"><a href="../index2/bumen.html.">部门概况</a></div>
                        <div class="title">师资队伍</div>
                        <div class="title">思政建设</div>
                        <div class="title">红馆</div>
                        <div class="title">心理健康教育中心</div>
                        <div class="title">教学科研</div>
                        <div class="title">学生社团</div>
                        <!-- <div class="search"> <input type="search" placeholder="请输入关键词搜索"></div> -->
                    </div>
                </div>

            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="image" src="../img/1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="image" src="../img/1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="image" src="../img/1.png" alt="">
                    </div>
                </div>
                <!--如果需要滚动条-->
                <div class="swiper-pagination"></div>
                <!-- <div class="head-img">
                <img src="/img/1.png" alt="">
            </div> -->
            </div>
            <!-- 新闻公告 -->
            <div class="News">
                <div class="news-title">
                    <div>XIN WEN GONG GAO</div>
                    <div>新闻公告</div>
                </div>
                <div class="news-cent">
                    <div class="cent-n">
                        <div class="cen-box">
                            <div class="cent-left">
                                <img src="../img/3.png" alt="">
                            </div>
                            <div class="cent-right">
                                <div class="cr-title">
                                    “为党育人 为国育才”--9位法大教师倾情讲
                                </div>
                                <div class="cr-title">述育人故事</div>
                                <div class="line">
                                    <div class="line1"></div>
                                    <div class="day">2022-11-02</div>
                                </div>
                                <div class="cr-cent">
                                    三尺讲台育英才，一方舞台展风来。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契…
                                </div>
                                <div class="cr-botom">
                                    <img src="../img/4.png" alt="">
                                    <img src="../img/4.png" alt="">
                                    <div class="num"><text class="fi">1</text>/3</div>
                                </div>
                            </div>
                        </div>
                        <div class="news-bot">
                            <div class="nb-left">
                                <div class="nl-bo">
                                    <div class="nb-title">“为党育人 为国育才”--9位法大教师倾情讲述育</div>
                                    <div class="nb-cen">三尺进台百英才，一方舞台展风采。"课比天大，是一幅字,
                                        一 块匾，是心照不宣的默契三尺讲台育英才...
                                    </div>
                                    <div class="nb-day">2022-11-02</div>
                                </div>
                            </div>
                            <div class="nb-cent">
                                <div class="nl-bo">
                                    <div class="nb-title">“为党育人 为国育才”--9位法大教师倾情讲述育</div>
                                    <div class="nb-cen">三尺进台百英才，一方舞台展风采。"课比天大，是一幅字,
                                        一 块匾，是心照不宣的默契三尺讲台育英才...
                                    </div>
                                    <div class="nb-day">2022-11-02</div>
                                </div>
                            </div>
                            <div class="nb-right">
                                <div class="nl-bo">
                                    <div class="nb-title">“为党育人 为国育才”--9位法大教师倾情讲述育</div>
                                    <div class="nb-cen">三尺进台百英才，一方舞台展风采。"课比天大，是一幅字,
                                        一 块匾，是心照不宣的默契三尺讲台育英才...
                                    </div>
                                    <div class="nb-day">2022-11-02</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="news-d">
                    <span>查看更多</span>
                    <img src="../img/4.png" alt="">
                </div>
            </div>
            <!-- 党建引领 -->
            <div class="Party">
                <div class="party-title">
                    <div>DAN JIAN YIN LING</div>
                    <div>党建引领</div>
                </div>
                <div class="party-box">
                    <div class="pab-left">
                        <img src="../img/5.png" alt="">
                        <div class="pl-bo">
                            <div class="bo-le">
                                <div>02</div>
                                <div>2022-11</div>
                            </div>
                            <div class="bo-ri">关于举办第二届(2022年)烟台市乡村面艺关
                                于举办第二届(2022年)烟台市乡村面艺……</div>
                        </div>
                    </div>
                    <div class="pab-left">
                        <img src="../img/5.png" alt="">
                        <div class="pl-bo">
                            <div class="bo-le">
                                <div>02</div>
                                <div>2022-11</div>
                            </div>
                            <div class="bo-ri">关于举办第二届(2022年)烟台市乡村面艺关
                                于举办第二届(2022年)烟台市乡村面艺……</div>
                        </div>
                    </div>
                    <div class="pab-left1">
                        <img src="../img/5.png" alt="">
                        <div class="pl-bo">
                            <div class="bo-le">
                                <div>02</div>
                                <div>2022-11</div>
                            </div>
                            <div class="bo-ri">关于举办第二届(2022年)烟台市乡村面艺关
                                于举办第二届(2022年)烟台市乡村面艺……</div>
                        </div>
                    </div>
                </div>
                <div class="news-d">查看更多
                    <img src="../img/4.png" alt="">
                </div>
            </div>
            <!-- 教研动态 -->
            <div class="research">
                <div class="resea-title">
                    <div>JIAO YAN DONG TAI</div>
                    <div>教研动态</div>
                </div>
                <div class="rese-box">
                    <div class="rese-cen">
                        <div class="res-lift">
                            <div><img src="../img/6.png" alt="" srcset=""></div>
                            <div>"为党育人 为国育才"</div>
                        </div>
                        <div class="res-right">
                            <div>
                                <ul class="rest-ul">
                                    <li>"为党育人 为国育才" <text class="res-day">2022-11-2</text></li>
                                    <li>"为党育人 为国育才" <text class="res-day">2022-11-2</text></li>
                                    <li>"为党育人 为国育才" <text class="res-day">2022-11-2</text></li>
                                    <li>"为党育人 为国育才" <text class="res-day">2022-11-2</text></li>
                                    <li>"为党育人 为国育才" <text class="res-day">2022-11-2</text></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="news-d">查看更多
                        <img src="../img/4.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 社会服务 -->
            <div class="Social">
                <div class="social-title">
                    <div>SHE HUI FU WU</div>
                    <div>社会服务</div>
                </div>
                <div class="cocia-box">
                    <div class="soc-left">
                        <img src="../img/10.png" alt="">
                        <div class="soc-cen">
                            <div>形势与政策报告会之“新东欧地缘政治冲突及...</div>
                            <div> 形势与政策报告会之”新东欧地缘政治冲突及形势与政策报告会之
                                “新东欧地缘\政治冲突及形势与政策报告会之“新东欧地缘政治冲突及...</div>
                            <div><img src="../img/11.png" alt="">
                                <div>2022-09-29</div>
                            </div>
                        </div>
                    </div>
                    <div class="news-d11">查看更多
                        <img src="../img/4.png" alt="">
                    </div>
                    <div class="soc-right">
                        <div class="socr-top">
                            <img src="../img/8.png" alt="">
                            <div class="so-t">红馆</div>
                        </div>
                        <div class="socr-bottom">
                            <img src="../img/9.png" alt="">
                            <div class="so-t">心理健康中心</div>
                        </div>
                    </div>
                </div>
                <div class="newss-d1">查看更多
                    <img src="../img/4.png" alt="">
                </div>
                <div class="news-d">查看更多
                    <img src="../img/4.png" alt="">
                </div>
            </div>
            <!-- 主题活动 -->
            <div class="box4">
                <div class="box4title">
                    <div class="box4title1">ZHU TI FU WU</div>
                    <div class="box4title2">主题活动</div>
                </div>
                <div class="box4center">
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="../img/12.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="../img/12.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="../img/12.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="../img/12.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日，一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                </div>
                <div class="box4-d">查看更多
                    <img src="../img/4.png" alt="">
                </div>
                <div class="newws-d">查看更多
                    <img src="../img/4.png" alt="">
                </div>
            </div>
            <!-- 马院风采 -->
            <div class="maf">
                <div class="maf-title">
                    <div>MA YUAN FENG CAI</div>
                    <div>马院风采</div>
                </div>
                <div class="maf-ro">
                    <div class="swiper mySwiper2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="../img/3.png" alt="">
                            </div>
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="../img/3.png" alt="">
                            </div>
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="../img/3.png" alt=""></div>
                        </div>
                        <!-- <div class="swiper-pagination"></div> -->
                    </div>
                </div>
                <div class="maf-lia">
                    <ul>
                        <li>友情链接：</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                    </ul>
                </div>
            </div>
            <!-- 结尾 -->
            <div class="bottom-box">
                <div class="bb-cent">
                    <div class="b-lo">
                        <img src="../img/2.png" alt="">
                    </div>
                    <div class="b-das">
                        地址：山东省烟台市高新区海天路1001号
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;办公室电话：0535-293876
                    </div>
                    <div class="b-er">
                        <img src="../img/10.jpg" alt="">
                    </div>
                </div>
                <div class="boo-t">Copyright ◎山东省城市服务技师学院版权所有</div>
            </div>
        </div>
    </div>
</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 3080
        },
        loop: true,//循环模式选项// 如果需要滚动条
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>
<script>
    var swiper = new Swiper(".mySwiper2", {
        autoplay: {
            delay: 3080
        },
        slidesPerView: 3,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>

</html>